<template>
    <div>
        <Header></Header>
        <section class="container">
            <el-row :gutter="10">
                <el-col :md="17">
                    <el-card shadow="never" class="box-card" :body-style="{ padding: '5px' }">
                        <el-row>
                            <el-col :span="6" class="SettingsNav">
                                <ol>
                                    <li>
                                        <i class="fas fa-user"></i> 账户与密码</li>
                                    <li>
                                        <i class="fas fa-envelope"></i> 消息与邮件</li>
                                </ol>
                            </el-col>
                            <el-col :span="18" class="SettingsMain">
                                <div class="SettingsTitle">
                                    <div class="SettingsTitle-title">账户与密码</div>
                                    <div class="SettingsTitle-descr">帐户设置/个性域名
                                    </div>
                                </div>
                                <div class="SettingsTitle">
                                    <div class="SettingsTitle-title">账户设置</div>
                                    <div class="SettingsTitle-descr">绑定手机和邮箱，并设置密码，帐号更安全
                                    </div>
                                </div>
                                <div class="SettingsAccount-accountForm">
                                    <div class="options">
                                        <div class="options-title">密码</div>
                                        <div class="options-descr">未设置</div>

                                    </div>
                                                                        <div class="options">
                                        <div class="options-title">绑定手机</div>
                                        <div class="options-descr">未设置</div>

                                    </div>
                                                                        <div class="options">
                                        <div class="options-title">绑定邮箱</div>
                                        <div class="options-descr">未设置</div>

                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
                <el-col :md="7">
                    <Faq></Faq>
                </el-col>
            </el-row>
        </section>

        <Footer></Footer>
    </div>
</template>

<script>
import Header from "../../components/Header";
import Footer from '../../components/Footer'
import Faq from "../../components/Faq";
export default {
  components: {
    Header,
    Footer,
    Faq
  }
};
</script>

<style scoped>
ol {
  list-style: none;
}

.SettingsNav {
  border-right: 1px solid #ebeef5;
}

.SettingsNav li {
  padding: 10px;
  padding-left: 30px;
  margin-left: -45px;
  margin-bottom: 10px;
  color: #909399;
}

.SettingsNav li:hover {
  background-color: rgba(133, 144, 166, 0.08);
  font-weight: 600;
  color: black;
}

.SettingsMain {
  padding: 10px;
}

.SettingsTitle {
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
  padding-top: 20px;
}

.SettingsMain .SettingsTitle-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}

.SettingsMain .SettingsTitle-descr {
  font-size: 14px;
  color: #909399;
  margin-bottom: 10px;
}

.options {
padding-left: 30px;
margin-top: 10px;
border-bottom: 1px solid #ebeef5;
}

.options div{
    padding: 5px;
}

.options .options-descr{
    font-size: 14px;
    color: #909399;
}
</style>


